<template>
  <div class="Index" v-if="data_index">
    <!-- 头部搜索 -->
    <div class="search-box">
      <div class="logo">
        <img :src="data_index.logoUrl" />
      </div>
      <router-link to="/Search" class="search">
        <van-icon name="search" color="#bebebe" size="0.4rem" class="icon" />
        <span class="tip">搜索商品</span>
      </router-link>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in data_index.banner" :key="index">
          <img v-lazy="item.pic" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 导航菜单 -->
    <div class="nav">
      <ul>
        <li v-for="(item, index) in data_index.menus" :key="index">
          <router-link :to="item.wap_url">
            <img v-lazy="item.pic" />
            <span>{{ item.name }}</span>
          </router-link>
        </li>
      </ul>
    </div>
    <!-- 通知 -->
    <div class="inform">
      <div class="logo">
        <img
          src=""
        />
      </div>
      <i class="line"></i>
      <div class="banner">
        <van-swipe
          style="height: 38px"
          vertical
          :autoplay="3000"
          :show-indicators="false"
        >
          <van-swipe-item v-for="(item, index) in data_index.roll" :key="index">
            <router-link :to="item.wap_url">
              <span>{{ item.info }}</span>
              <van-icon name="arrow" color="#9a9a9a" size="0.3rem" />
            </router-link>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- 产品 -->
    <div class="product">
      <!-- 产品分类 -->
      <div class="category">
        <ModuleTitle :url="'category'">
          <template #mainTitle> 快速选择 </template>
          <template #subTitle>
            {{ data_index.info.fastInfo }}
          </template>
        </ModuleTitle>
        <div class="categorylist">
          <swiper ref="mySwiper" :options="swiperOptions" v-if="data_index.info.fastList">
            <swiper-slide
              v-for="item in data_index.info.fastList"
              :key="item.id"
              @click.native="ToGoodsList(item)"
            >
              <img :src="item.pic" alt="" class="slide_img" />
              <span class="slide_text">{{ item.cate_name }}</span>
            </swiper-slide>
          </swiper>
        </div>
      </div>
      <!-- 产品推荐 -->
      <div class="recommend">
        <ModuleTitle :url="'hot_new_goods?id=1'">
          <template #mainTitle> 精品推荐 </template>
          <template #subTitle>
            {{ data_index.info.bastInfo }}
          </template>
        </ModuleTitle>
        <div class="banner">
          <van-swipe class="my-swiper" :autoplay="3000">
            <van-swipe-item
              v-for="(item, index) in data_index.info.bastBanner"
              :key="index"
            >
              <img v-lazy="item.img" />
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="recommendlist">
          <HotGoodsCard
            v-for="item in data_index.info.bastList"
            :key="item.id"
            :item="item"
          ></HotGoodsCard>
        </div>
      </div>
    </div>
    <!-- 热门榜单 -->
    <div class="hot">
      <div class="title">
        <div class="left">
          <span class="main">热门榜单</span>
          <span class="sub">根据销量、搜索、好评等综合得出</span>
        </div>
        <div class="right">
          <router-link to="/hot_new_goods?id=2">
            <span>更多</span>
            <van-icon name="arrow" color="#fff" size="0.3rem" />
          </router-link>
        </div>
      </div>
      <div class="commodity">
        <ul>
          <CommodityCard
            v-for="item in data_index.likeInfo"
            :key="item.id"
            :item="item"
          ></CommodityCard>
        </ul>
      </div>
    </div>
    <!-- 产品 -->
    <div class="product">
      <!-- 新品 -->
      <div class="new">
        <ModuleTitle :url="'hot_new_goods?id=3'">
          <template #mainTitle> 首发新品 </template>
          <template #smallTitle> NEW~ </template>
          <template #subTitle>
            {{ data_index.info.firstInfo }}
          </template>
        </ModuleTitle>
        <div class="newlist">
          <swiper ref="mySwiper2" :options="swiperOptions2">
            <swiper-slide v-for="item in data_index.info.firstList" :key="item.id">
              <CommodityCard :item="item"></CommodityCard>
            </swiper-slide>
          </swiper>
        </div>
      </div>
      <!-- 促销 -->
      <div class="promotion recommend">
        <ModuleTitle :url="'promotion?id=4'">
          <template #mainTitle> 促销单品 </template>
          <template #subTitle>
            {{ data_index.info.salesInfo }}
          </template>
        </ModuleTitle>
        <div class="promotionlist recommendlist">
          <router-link
            :to="'/detail?id=' + item.id"
            v-for="item in data_index.benefit"
            :key="item.id"
          >
            <van-card :thumb="item.image">
              <template #title>
                <div class="top">
                  <span class="title">{{ item.store_name }}</span>
                  <div>
                    <span class="promotionprice"
                      >促销价：￥{{ item.price }}</span
                    >
                  </div>
                </div>
              </template>
              <template #price>
                <s class="regulat">日常价：{{ item.ot_price }}</s>
              </template>
              <template #num>
                <span class="residue">仅剩：{{ item.stock }}</span>
              </template>
            </van-card>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import ModuleTitle from "@/components/ModuleTitle";
import CommodityCard from "@/components/CommodityCard";
import HotGoodsCard from "@/components/HotGoodsCard";
export default {
  components: {
    ModuleTitle,
    CommodityCard,
    HotGoodsCard,
  },
  data() {
    return {
      swiperOptions: {
        slidesPerView: 3.5, //显示个数
        spaceBetween: 10, // 间距
        speed: 500, //速度
      },
      swiperOptions2: {
        slidesPerView: 2.7, //显示个数
        spaceBetween: 10, // 间距
        speed: 500, //速度
      },
    };
  },
  computed: {
    ...mapState({
      data_index: (state) => state.data.index,
    }),
  },
  methods: {
    ToGoodsList(params) {
      this.$router.push({
        path: "/goods_list",
        query: {
          id: params.id,
          title: params.cate_name,
        },
      });
    },
  },
};
</script>

<style lang="less">
.Index {
  width: 100%;
  padding-bottom: 60px;
  .search-box {
    width: 100%;
    height: 50px;
    padding: 0 20px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    .logo {
      width: 63px;
      height: 22px;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .search {
      flex: 1;
      height: 30px;
      background-color: #f7f7f7;
      border-radius: 20px;
      position: relative;
      .icon {
        position: absolute;
        left: 10px;
        top: 5px;
      }
      .tip {
        color: #bebebe;
        font-size: 14px;
        position: absolute;
        left: 40px;
        top: 7px;
      }
    }
  }
  .banner {
    width: 100%;
    .my-swipe {
      width: 100%;
      .van-swipe__indicator {
        width: 15px;
        height: 2px;
        border-radius: 8px;
      }
    }
  }
  .nav {
    width: 100%;
    padding: 10px 0;
    background-color: #fff;
    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      li {
        flex: 25%;
        height: 80px;
        a {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          img {
            width: 40px;
            height: 40px;
          }
          span {
            margin-top: 10px;
            font-size: 14px;
          }
        }
      }
    }
  }
  .inform {
    width: 100%;
    height: 40px;
    border: 1px solid #f6f6f6;
    padding: 0 15px;
    background-color: #fff;
    display: flex;
    align-items: center;
    .logo {
      width: 62px;
      height: 14px;
      img {
        width: 100%;
        height: 100%;
        vertical-align: baseline !important;
      }
    }
    .line {
      width: 1px;
      height: 20px;
      background-color: #e5e5e5;
      margin: 0 8px;
    }
    .banner {
      flex: 1;
      .van-swipe-item {
        height: 100%;
        a {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          span {
            font-size: 13px;
            color: #777777;
          }
        }
      }
    }
  }
  .product {
    width: 100%;
    padding: 0 10px;
    background-color: #fff;
    .category {
      width: 100%;
      .categorylist {
        width: 100%;
        .swiper-container {
          width: 100%;
          height: 100%;
          padding-bottom: 20px;
          border-bottom: 1px solid #f4f4f4;
        }
        .swiper-slide {
          text-align: center;
          font-size: 18px;
          height: 100%;
          padding-bottom: 10px;
          &:nth-child(3n) {
            border-bottom: 2px solid #ff6960;
          }
          &:nth-child(3n-1) {
            border-bottom: 2px solid #579afe;
          }
          &:nth-child(3n-2) {
            border-bottom: 2px solid #47b479;
          }
          .slide_img {
            width: 100%;
            margin-bottom: 10px;
          }
          .slide_text {
            font-size: 14px;
          }
        }
      }
    }
    .recommend {
      width: 100%;
      .banner {
        width: 100%;
        height: 160px;
        .my-swiper {
          width: 100%;
          height: 100%;
          img {
            width: 100%;
            height: 141px;
          }
          .van-swipe__indicators {
            bottom: 5px;
            .van-swipe__indicator {
              width: 4px;
              height: 4px;
              background-color: rgba(226, 19, 19, 1);
            }
            .van-swipe__indicator--active {
              background-color: #fc4141;
              opacity: 1;
              width: 9px;
              border-radius: 4px;
            }
          }
        }
      }
      .recommendlist {
        width: 100%;
        .van-card {
          background-color: #fff;
          padding-left: 0;
          padding-right: 0;
          .van-card__thumb {
            margin-right: 0;
            .van-image__error,
            .van-image__img,
            .van-image__loading {
              width: auto;
              height: 90%;
            }
          }
          .van-card__content {
            > div {
              &:nth-of-type(1) {
                flex: 1;
                .top {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  .title {
                    width: 100%;
                    font-size: 14px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                  .price {
                    font-weight: bold;
                    font-size: 15px;
                    color: red;
                  }
                  .promotionprice {
                    color: white;
                    background-color: #ff4020;
                    padding: 5px 10px;
                    border-radius: 12px 0 12px 0;
                  }
                }
              }
            }
            .van-card__bottom {
              height: 0.6rem;
              line-height: normal;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .van-card__price {
                font-size: 12px;
                .vip {
                  font-weight: bold;
                }
                .vip_icon {
                  width: 23px;
                  height: 10px;
                  display: inline-block;
                  background-image: url();
                  background-size: cover;
                  margin: 0 10px 0 5px;
                }
                .soldout {
                  color: #aab2c8;
                }
                .regulat {
                  color: #999999;
                }
              }
            }
          }
        }
        .van-card:not(:first-child) {
          margin-top: 0;
        }
      }
    }
    .new {
      width: 100%;
      .newlist {
        width: 100%;
        .swiper-container {
          width: 100%;
          height: 100%;
          padding-bottom: 20px;
          border-bottom: 1px solid #f0f0f0;
        }
        .swiper-slide {
          text-align: center;
          font-size: 18px;
          height: 100%;
          background-color: #fff;
          .CommodityCard{
            width: 100%;
            height: 170px;
            border: 1px solid #f0f0f0;
            padding-bottom: 10px;
            .desc{
              padding: 0 3px;
            }
          }
        }
      }
    }
    .promotion {
      width: 100%;
      border-top: 1px solid #f7f7f7;
      .promotionlist {
        width: 100%;
        .van-card {
          border-bottom: 1px solid #eee;
        }
      }
    }
  }
  .hot {
    width: 100%;
    height: 210px;
    background-image: url(http://47.115.51.185/h5/img/index-bg.7128c2eb.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding: 0 10px;
    background-color: #fff;
    .title {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: white;
      .left {
        .main {
          font-size: 14px;
          font-weight: bold;
          margin-right: 10px;
        }
        .sub {
          font-size: 12px;
        }
      }
      .right {
        a {
          span {
            font-size: 14px;
            margin-right: 2px;
            vertical-align: 2px; /* no */
            color: white;
          }
        }
      }
    }
    .commodity {
      width: 100%;
      height: 160px;
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 1px 2px #ccc;
      padding: 15px;
      ul {
        width: 100%;
        display: flex;
        li {
          width: calc((100% - 20px) / 3);
          height: 130px;
          &:nth-of-type(2) {
            margin: 0 10px;
          }
        }
      }
    }
  }
}
</style>